<template>
  <div class="container">
      <p class="title">目录</p>
    <van-collapse v-model="activeNames">
      <van-collapse-item
        v-for="(item,index) in listData"
        :title="item.section"
        :name="index"
        :key="index"
      >
        
         <van-cell v-for="(cla,indexs) in item.classSchedule" :key="indexs">
              <template #title>
                <xIcon id="icon" href="icon-24gf-playCircle"></xIcon>
                <span class="custom-title">{{index+1}}-{{indexs+1}}</span>
                <span type="danger">{{cla}}</span>
                </template>
         </van-cell> 
          
        
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: [0,1],
      listData: [],
    };
  },
  computed: {
    //   listData(){
    //       return this.$store.state.detail.sessionData.intro.catalogue
    //   }
  },
  beforeMount() {
    this.listData = this.$store.state.detail.sessionData.catalogue;
  },
};
</script>

<style lang="scss" scoped>
.title{
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    font-weight: 600;
    background: white;
    margin: 0;
    padding: 0 16px;
}
::v-deep #icon{
    width: 14px;
    height: 14px;
}
.custom-title{
    margin: 0 10px;
}
</style>